<template>
    <div class="flyDuck-app-home-main-page">
        <!--搜索区域-->
        <div class="flyDuck-app-home-main-page-query">
            <el-form ref="queryForm" :model="queryParam" :inline="true">
                <el-form-item label="职位名称" prop="configName">
                    <el-input v-model="queryParam.configName" size="small" @keydown.enter.native="getConfigTableData"  placeholder="请输入职位名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="mini" @click="getConfigTableData" icon="el-icon-search">搜索</el-button>
                    <el-button size="mini" @click="resetQuery" icon="el-icon-refresh">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--按钮区域-->
        <div class="flyDuck-app-home-main-page-button">
            <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                    <el-button type="primary" size="mini" icon="el-icon-plus" @click="openAddDialog" v-has="'/system/sysConfigController/addConfig'">新增</el-button>
                </el-col>
            </el-row>
        </div>
        <!--表格区域-->
        <div class="flyDuck-app-home-main-page-table">
            <el-table :data="configTableData"  size="mini" height="400px" >
                <el-table-column align="center" label="序号" type="index" width="70">
                    <template slot-scope="scope">
                        <span>{{ (page - 1) * size + scope.$index + 1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="configName" label="参数名称"></el-table-column>
                <el-table-column align="center" prop="configKey" label="参数键名"></el-table-column>
                <el-table-column align="center" prop="configValue" label="参数值"></el-table-column>
                <el-table-column align="center" prop="configType" label="参数类型" :formatter="configTypeFormatter"></el-table-column>
                <el-table-column align="center" prop="status" label="状态" :formatter="statusFormatter"></el-table-column>
                <el-table-column align="center" label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" icon="el-icon-edit" @click="openUpdateDialog(scope.row)" v-has="'/system/sysConfigController/updateConfig'">编辑</el-button>
                        <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteConfig(scope.row)" v-has="'/system/sysConfigController/deleteConfig'">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!--分页区域-->
        <div class="flyDuck-app-home-main-page-pagination">
            <el-pagination @current-change="currentChange" @size-change="sizeChange" background layout='sizes, prev, pager, next, jumper, ->, total' :total="total"></el-pagination>
        </div>
        <!--弹窗-->
        <div class="flyDuck-app-home-main-page-dialog">
            <el-dialog :title="title" :visible.sync="dialogVisible" width="500px">
                <el-form ref="configForm" :rules="rules" :model="configForm"  :validate-on-rule-change="false" label-width="80px">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="参数名称" prop="configName">
                                <el-input v-model="configForm.configName" placeholder="请输入参数名称"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="参数键名" prop="configKey">
                                <el-input v-model="configForm.configKey" placeholder="请输入参数键名"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="参数值" prop="configValue">
                                <el-input v-model="configForm.configValue" placeholder="请输入参数值"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="参数类型" prop="configType">
                                <el-select v-model="configForm.configType" :disabled="disabled" clearable placeholder="请选择参数类型">
                                    <el-option  v-for="item in configTypeOptions" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="状态" prop="status">
                                <el-switch style="margin-top: 10px" v-model="configForm.status" active-value="1" inactive-value="2" active-color="#13ce66" ></el-switch>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </span>
            </el-dialog>
        </div>
    </div>
</template>
<script>
    import {getConfigPageList,getConfigDetail,addConfig,updateConfig,deleteConfig} from '@/api/system/config'
    import {getDictOptionList} from '@/api/system/dict'
    export default {
        name: "SysConfig",
        data() {
            return {
                /*搜索区域*/
                queryParam:{
                    configName:'',
                },
                /*按钮区域*/
                /*表格区域*/
                statusOptions:[],
                configTableData:[],
                configTypeOptions:[],
                /*分页区域*/
                total:0,
                page:1,
                size:10,
                /*弹窗区域*/
                disabled:false,
                dialogVisible:false,
                title:'',
                configForm:{
                    id:null,
                    configName: null,
                    configKey: null,
                    configValue: null,
                    status: '1',
                    configType:'',
                    deptId:null
                },
                rules:{
                    configName:[{required:true, message:'请输入参数名称', trigger:'blur'}],
                    configKey:[{required:true, message:'请输入参数键名', trigger:'blur'}],
                    configValue:[{required:true, message:'请输入参数值', trigger:'blur'}],
                },
            };
        },
        mounted() {
            this.getConfigTableData();
            this.getStatusOptions();
            this.getConfigTypeOptions();
        },
        methods: {
            /*搜索区域*/
            /*按钮区域*/
            openAddDialog(){
                this.title = '添加参数';
                this.resetConfigForm();
                this.dialogVisible = true;
            },
            resetConfigForm(){
                this.configForm = {
                    id:null,
                    configName: null,
                    configKey: null,
                    configValue: null,
                    status: '1',
                };
            },
            openUpdateDialog(data){
                this.title = '编辑参数';
                //回显
                getConfigDetail(data.id).then(data => {
                    this.configForm = data;
                })
                this.disabled = true
                this.dialogVisible = true;
            },
            resetQuery(){
                this.queryParam.configName = '';
                this.page = 1;
                this.getConfigTableData();
            },
            /*表格区域*/
            getStatusOptions(){
                getDictOptionList(`status`).then(data => {
                    this.statusOptions = data;
                })
            },
            getConfigTypeOptions(){
                getDictOptionList(`sys_config_configType`).then(data => {
                    this.configTypeOptions = data;
                })
            },
            statusFormatter(row, column) {
                return this.selectDictLabel(this.statusOptions, row.status);
            },
            configTypeFormatter(row, column) {
                return this.selectDictLabel(this.configTypeOptions, row.configType);
            },
            getConfigTableData(){
                getConfigPageList(this.queryParam,this.page,this.size).then(data=>{
                    this.configTableData = data.rows;
                    this.total = data.total;
                })
            },
            deleteConfig(data){
                this.$confirm(`是否删除${data.configName}?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteConfig(data.id).then(data=>{
                        if(data){
                            this.getConfigTableData();
                        }
                    })
                })
            },
            /*分页区域*/
            currentChange(currentPage){
                this.page = currentPage;
                this.getConfigTableData();
            },
            sizeChange(size){
                this.size = size;
                this.getConfigTableData();
            },
            /*弹窗区域*/
            submitForm(){
                if(this.configForm.id){
                    //修改
                    this.$refs['configForm'].validate(valid=>{
                        if(valid){
                            updateConfig(this.configForm).then(data => {
                                if(data){
                                    this.getConfigTableData();
                                    this.dialogVisible = false;
                                }
                            })
                        }
                    })
                }else {
                    //添加
                    this.$refs['configForm'].validate(valid=>{
                        if(valid){
                            addConfig(this.configForm).then(data => {
                                if(data){
                                    this.getConfigTableData();
                                    this.dialogVisible = false;
                                }
                            })
                        }
                    })
                }


            },
        },
    }
</script>
<style>
</style>

